<template>
    <div class="State">
        <!-- 搜索栏 -->
        <div class="top" v-show="count">
            <span style="margin-right:10px; font-weight:700;font-size:14px;" class="demonstration">到店时间</span>
            <el-date-picker
            v-model="dataParams"
            type="daterange"
            size="small"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <el-button
                style="margin-left:10px"
                type="primary"
                size="small"
                @click="search"
                icon="el-icon-search">搜索
            </el-button>
            <el-button
                size="small"
                @click="reset"
                icon="el-icon-refresh"
                style="margin-left: 10px;">重置
            </el-button>
        </div>
        <!-- 新增栏 -->
        <div class="edit">
        <!-- 新增按钮 -->
            <div class="add-left">
                <Addstatement></Addstatement>
                
            </div>
        <!-- 刷新 -->
            <div class="add-right">
                <el-button
                icon="el-icon-search"
                size="mini"
                @click="changetop"
                circle></el-button>
                <el-button
                icon="el-icon-refresh"
                size="mini"
                circle></el-button>
            </div>
        </div>
        <!-- 用户信息 -->
        <!-- 表格 -->
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <!-- 勾选框 -->
            <el-table-column type="selection"> </el-table-column>

            <el-table-column label="客户姓名">
            <template slot-scope="{ row }">{{ row.customerName }}</template>
            </el-table-column>

            <el-table-column width="150" label="联系方式">
            <template slot-scope="{ row }">{{ row.customerPhone }}</template>
            </el-table-column>

            <el-table-column width="150" label="到店时间">
            <template slot-scope="{ row }">{{ row.actualArrivalTime }}</template>
            </el-table-column>

            <el-table-column label="车牌号码">
            <template slot-scope="{ row }">{{
                row.licensePlate
            }}</template>
            </el-table-column>

            <el-table-column label="汽车类型">
                <template slot-scope="{ row }">{{row.carSeries}}
                </template>
            </el-table-column>

            <el-table-column label="服务类型">
            <template slot-scope="{ row }">{{
                row.serviceType=="0"?"维修": "保养"
            }}</template>
            </el-table-column>

            <el-table-column label="预约用户">
            <template slot-scope="{ row }">{{
                row.payeeId=="0"?"是":"否"
            }}</template>
            </el-table-column>

            <el-table-column show-overflow-tooltip label="结算状态">
            <template slot-scope="{ row }">
                {{ row.status=="0"?"消费中":"已支付" }}
            </template>
            </el-table-column>

            <el-table-column label="操作" width="130" align="center">
            <template slot-scope="">
                <el-button type="text"
                plain
                disabled
                style="border:none;background-color: transparent;"
                size="small">
                <i class="el-icon-edit"></i>编辑
                </el-button>
                <el-button
                    type="text"
                    size="small">
                    <i class="el-icon-tickets"></i>
                    明细
                </el-button>
                <el-button
                    plain
                    disabled
                    style="border:none;background-color: transparent;"
                    type="text"
                    size="small">
                    <i class="el-icon-delete"></i>
                    删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="fenye" style="display:flex justify-content:flex-end">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchvalue.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { GetStatementApi,searchStatementApi } from "@/request/api";
import Addstatement from "@/components/userness/Addstatement.vue" 
export default {
    data () {
        return {
            tableData:[],
            total:null,
            // value:"",
            dataParams:null,
            count:true,
            searchvalue:{
                pageNum:1,
                pageSize:10,
                // 搜索的起止时间
                startTime:'',
                endTime:'',
            }
        }
    },
    methods:{
        // 时间搜索
        async search(){
            this.searchvalue.startTime= new Date(this.dataParams[0]).toLocaleDateString().replaceAll('/','-')
            this.searchvalue.endTime= new Date(this.dataParams[1]).toLocaleDateString().replaceAll('/','-')
            let res = await searchStatementApi({
                ...this.searchvalue
            })
            if(!res) return 
            this.tableData = res.rows
        },
        // 刷新重置按钮
        reset(){
            this.dataParams='',
            this.getTableData()
        },
        // 搜索隐藏
        changetop(){
            this.count=!this.count
        },
        handleSelectionChange(){},
        async getTableData(){
            const GetStatementRes = await GetStatementApi({
                pageNum: this.searchvalue.pageNum,
                pageSize: this.searchvalue.pageSize,
            });
            if(!GetStatementRes) return;
            this.tableData = GetStatementRes.rows;
            this.total = GetStatementRes.total;
        },handleSizeChange(val){
            this.searchvalue.pageSize=val;
            this.getTableData()
        },
        handleCurrentChange(val){
            this.searchvalue.pageNum=val;
            this.getTableData()
        },
    },
    created() {
    this.getTableData();
  },
  components:{
    Addstatement
  }
}
</script>
 
<style lang = "less" scoped>
.State{
    box-sizing:border-box
}
.edit{
    margin-top: 20px;
    .add-left{
        float: left;
    }
    .add-right{
        float: right;
    }
}
/* 分页 */
.fenye{
    float: right;
    margin-top:20px;
}
</style>